<script lang="ts" setup>
import type {FormInstance, FormRules} from 'element-plus';
import * as projectFileApi from "@/api/business/project/projectFile";

defineOptions({name: "ProjectFileForm"})
const {t} = useI18n() // 国际化
const message = useMessage()
const emit = defineEmits(['success'])
const disabled = computed(() => {
  return type.value === 'detail'
})
const type = ref('detail')
const title = ref('详情')
const dialogVisible = ref(false)
const formLoading = ref(false)

const formRef = useTemplateRef<FormInstance>('formRef')
const form = ref({
  fileList: [],
  remake: void 0,
})
const rules = ref<FormRules>({
  fileList: [
    {required: true, message: '请上传文件', trigger: 'change'},
  ]
})

function handleClose() {
  dialogVisible.value = false
  formRef.value?.resetFields()
  form.value = {
    fileList: [],
    remake: void 0
  }
}

async function open(state: 'add' | 'edit' | 'detail' = "detail", id?: string) {
  type.value = state
  title.value = t('action.' + state)
  dialogVisible.value = true
  if (id) {
    formLoading.value = true
    try {
      // form.value = await projectFileApi.getProjectFile(id)
      form.value = {
        remake: void 0
      }
    } finally {
      formLoading.value = false
    }
  }
}

async function handleSubmit() {
  try {
    await formRef.value?.validate()
    if (type.value === 'add') {
      const formData = new FormData()
      formData.append('file', form.value.fileList[0])
      formData.append('remark', form.value.remake)
      await projectFileApi.createProjectFile(formData)
      message.success(t('common.createSuccess'))
    } else if (type.value === 'edit') {
      await projectFileApi.updateProjectFile(form.value)
      message.success(t('common.updateSuccess'))
    }
    emit('success')
    handleClose()
  } catch (e) {
    console.log(e)
  }
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title
    top="5vh"
    width="30%"
    @close="handleClose"
  >
    <el-form ref="formRef" v-loading="formLoading" :inline="true" :model="form"
             :rules class="-mb-15px" label-width="auto">
      <el-row :gutter="10">
        <el-col v-if="type === 'add'">
          <el-form-item class="w-100%" label="附件" prop="fileList">
            <el-upload ref="uploadRef" v-model:file-list="form.fileList" :auto-upload="false"
                       :drag="!form.fileList.length"
                       :limit="1"
                       action style="width: 100%;">
              <el-icon v-show="!form.fileList.length" class="el-icon--upload">
                <upload-filled/>
              </el-icon>
              <div v-show="!form.fileList.length" class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item class="w-100%" label="备注" prop="remark">
            <el-input v-model="form.content" :disabled clearable placeholder="请输入备注"
                      type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
